<div id="generator-content">
    <section id="generator">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Prompt Generator</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-6">Build a detailed prompt from scratch by selecting various cinematic elements, or generate one for an uploaded image.</p>
            <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
                <nav class="-mb-px flex space-x-4" aria-label="Tabs">
                    <button id="text-to-video-tab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm text-indigo-600 dark:text-indigo-400 border-indigo-500">Text-to-Video</button>
                    <button id="image-to-video-tab" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm text-gray-500 dark:text-gray-400 border-transparent hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">Image-to-Video</button>
                </nav>
            </div>

            <div id="text-to-video-content">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
                <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button id="generate-text-prompt-btn" class="w-full flex items-center justify-center bg-indigo-600 text-white py-3 px-4 rounded-lg font-bold hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-indigo-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
                        Generate Prompt
                    </button>
                    <button id="clear-text-form-btn" class="w-full flex items-center justify-center bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-3 px-4 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-500">
                        Clear All
                    </button>
                </div>
                <div id="text-prompt-output-container" class="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hidden">
                     <div id="text-short-prompt-section">
                         <div class="flex justify-between items-center mb-2">
                             <h4 class="font-semibold text-indigo-700 dark:text-indigo-400">Generated Prompt:</h4>
                             <button onclick="window.copyToClipboard('text-prompt-output')" class="p-1 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-md" title="Copy Prompt"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
                         </div>
                         <p id="text-prompt-output" class="text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 p-3 rounded-md break-words"></p>
                     </div>
                    <div id="text-long-prompt-section" class="mt-4 hidden">
                         <div class="flex justify-between items-center mb-2">
                             <h4 class="font-semibold text-green-700 dark:text-green-400">Enhanced Prompt:</h4>
                             <button onclick="window.copyToClipboard('text-long-prompt-output')" class="p-1 text-gray-500 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 rounded-md" title="Copy Enhanced Prompt"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
                         </div>
                         <p id="text-long-prompt-output" class="text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 p-3 rounded-md break-words"></p>
                     </div>
                    <button id="generate-longer-text-prompt-btn" class="mt-4 py-2 px-4 bg-green-600 text-white rounded-md font-semibold hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 hidden">
                        Generate Longer Prompt
                    </button>
                </div>
            </div>

            <div id="image-to-video-content" class="hidden">
                 <div>
                     <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">1. Upload Image</h4>
                     <input type="file" id="image-upload" accept="image/*" class="w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 dark:file:bg-indigo-900 file:text-indigo-600 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800"/>
                     <div id="image-preview-container" class="mt-4 hidden"><img id="image-preview" src="#" alt="Image Preview" class="max-h-48 rounded-lg shadow-md mx-auto"/></div>
                 </div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-6 mb-2">2. Add Details</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="image-to-video-fields"></div>
                <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button id="generate-image-prompt-btn" class="w-full flex items-center justify-center bg-indigo-600 text-white py-3 px-4 rounded-lg font-bold hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 disabled:bg-indigo-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        Generate Prompt
                    </button>
                    <button id="clear-image-form-btn" class="w-full flex items-center justify-center bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-3 px-4 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-500">
                        Clear All
                    </button>
                </div>
                <div id="image-prompt-output-container" class="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hidden">
                   <div id="image-short-prompt-section">
                       <div class="flex justify-between items-center mb-2">
                           <h4 class="font-semibold text-indigo-700 dark:text-indigo-400">Generated Prompt:</h4>
                           <button onclick="window.copyToClipboard('image-prompt-output')" class="p-1 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded-md" title="Copy Prompt"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
                       </div>
                       <p id="image-prompt-output" class="text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 p-3 rounded-md break-words"></p>
                   </div>
                   <div id="image-long-prompt-section" class="mt-4 hidden">
                       <div class="flex justify-between items-center mb-2">
                           <h4 class="font-semibold text-green-700 dark:text-green-400">Enhanced Prompt:</h4>
                           <button onclick="window.copyToClipboard('image-long-prompt-output')" class="p-1 text-gray-500 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 rounded-md" title="Copy Enhanced Prompt"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg></button>
                       </div>
                       <p id="image-long-prompt-output" class="text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 p-3 rounded-md break-words"></p>
                   </div>
                   <button id="generate-longer-image-prompt-btn" class="mt-4 py-2 px-4 bg-green-600 text-white rounded-md font-semibold hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 hidden">
                       Generate Longer Prompt
                   </button>
                </div>
            </div>
        </div>
    </section>
</div>

